
import React, { forwardRef, useContext, useEffect } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { Button } from 'antd'
import CustomizeModal, {CustomizeModalContext} from "@common/presentational/CustomizeModal";
import { getWarehouseOrderInfo } from "@sagas/warehouse/send";
import ReactHTMLTableToExcel from "react-html-table-to-excel";

const DeliverOrderContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { orderNumber, id } = params
    const dispatch = useDispatch()
    const { warehouseOrderInfo } = useSelector(state => state.send)
    useEffect(() => {
        dispatch(getWarehouseOrderInfo({id,orderNumber}))
    }, [])
    const printOrderDetail = () => {
        // todo
        // printJS({
        //     printable: 'deliverOrderDetail',
        //     type: 'html',
        //     documentTitle: ''
        // })
    }
    const tableStyle = {
        fontSize: '12px',
        color: '#333333',
        borderWidth: '1px',
        borderColor: '#e9e9e9',
        borderCollapse: 'collapse',
        marginTop: '20px',
        width: '100%'
    }
    const thStyle = {
        borderWidth: '1px',
        padding: '8px',
        borderStyle: 'solid',
        borderColor: '#e9e9e9',
        backgroundColor: '#f7f7f7',
        textAlign: 'center',
    }
    const tdStyle = {
        borderWidth: '1px',
        padding: '8px',
        borderStyle: 'solid',
        borderColor: '#e9e9e9',
        textAlign: 'center',
    }

    return (
        <>
            <div id="deliverOrderDetail" style={{ fontSize: '12px', width: '600px', margin: '0 auto' }}>
                <div style={{ fontSize: '16px', textAlign: 'center', padding: '20px 0' }}>发货明细</div>
                <div>
                    <div style={{ display: 'inline-block', width: '80px', fontWeight: 'bold' }}>订单编号：</div>
                    <div style={{ display: 'inline-block', width: '240px' }}>{warehouseOrderInfo.ext_order_number}</div>
                    {warehouseOrderInfo.deliver_time ? (
                        <React.Fragment>
                            <div style={{ display: 'inline-block', width: '80px', fontWeight: 'bold' }}>发货时间：</div>
                            <div style={{ display: 'inline-block', width: '150px' }}>{warehouseOrderInfo.deliver_time}</div>
                        </React.Fragment>
                    ) : null}
                </div>
                <table style={tableStyle} id="deliverOrderDetailTable">
                    <thead>
                        <tr>
                            <th style={{ ...thStyle, width: 160 }}>商品编号</th>
                            <th style={{ ...thStyle, width: 260 }}>商品名称</th>
                            <th style={{ ...thStyle, width: 100 }}>发货数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        {(warehouseOrderInfo && warehouseOrderInfo.details || []).map(prod => (
                            <tr key={prod.storage_key}>
                                <td style={tdStyle}>{prod.code}</td>
                                <td style={tdStyle}>{prod.name}</td>
                                <td style={tdStyle}>{prod.quantity}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            <div className="deliver-order-detail-button-line">
                <Button onClick={hide}>取消</Button>
                <Button type="primary" onClick={printOrderDetail}>打印</Button>
                <ReactHTMLTableToExcel
                    className="ant-btn ant-btn-primary"
                    table="deliverOrderDetailTable"
                    filename={`发货明细：${warehouseOrderInfo.ext_order_number}`}
                    sheet={warehouseOrderInfo.ext_order_number || ''}
                    buttonText="导出"
                />
            </div>
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title={null} ref={ref}>
        <DeliverOrderContent {...props} />
    </CustomizeModal>
))